<template>
  <div class="my-box">
      <div>V-Model子组件看到的操作：</div>
      <div>
        name：<span>{{modelValue}}</span> 
         --- age: <span>{{age}}</span>
         <button @click="changeInfo">v-model事件</button>
         </div>
  </div>
</template>
<script lang="ts" setup>
 // import { defineEmits, defineProps } from 'vue'
  // defineEmits和defineProps在<script setup>中自动可用，无需导入
  // 需在.eslintrc.js文件中【globals】下配置【defineEmits: true】、【defineProps: true】

// 声明props
 defineProps({
    modelValue: String,
    age: Number
})

const emit = defineEmits(['update:modelValue','update:age'])
const changeInfo = () =>{
    // 触发父组件值更新
    emit('update:modelValue','jack')
    // emit('update:age',18)
}
</script>

<style scoped>
.my-box{
    display: flex;
}
  /* 支持CSS变量注入v-bind(color) */
</style>
